<template>
  <div>
    <div style="width: 500px">
      <el-input
          prefix-icon="el-icon-search"
          placeholder="查询部门..."
          v-model="filterText">
      </el-input>

      <el-tree
          class="filter-tree"
          :data="deps"
          :props="defaultProps"
          :filter-node-method="filterNode"
          :expand-on-click-node="false"
          ref="tree">
      <span class="custom-tree-node" slot-scope="{ node, data }"
            style=" display: flex; justify-content: space-between;width: 100%;">
        <span>{{ node.label }}</span>
        <span>
          <el-button
              class="spanButton"
              type="primary"
              size="mini"
              @click="() => addDeps(data)">
            添加部门
          </el-button>
          <el-button
              class="spanButton"
              type="danger"
              size="mini"
              @click="() => deleteDeps( data)">
            删除部门
          </el-button>
        </span>
      </span>
      </el-tree>
    </div>
    <el-dialog
        title="添加部门"
        :visible.sync="dialogVisible"
        width="400px"
    >
      <span>
         <div>
          <table>
            <tr>
              <td style="display: flex">
                <el-tag>上级部门</el-tag>
                <span style="margin: 0 8px">{{ pname }}</span>
              </td>
            </tr>
            <tr>
              <td>
                <el-tag>部门名称</el-tag>
                <el-input style="width: 200px ;margin: 8px 8px" v-model="dept.name"
                          placeholder="请输入添加部门的名称..."> </el-input>
              </td>
            </tr>
          </table>
        </div>
      </span>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doAddDept">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "DepMana",
  data() {
    return {
      filterText: '',
      deps: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      dept: {
        name: '',
        parentId: ''
      },
      pname: '',
      dialogVisible: false,
      checkname:false,
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    insertDeptIntoDepts(deps, dep) {
      for (let i = 0; i < deps.length; i++) {
        let d = deps[i];
        if (d.id == dep.parentId) {
          d.children = d.children.concat(dep);
          if (d.children.length>0){
            d.isParent =true;
          }
          return;
        } else {
          this.insertDeptIntoDepts(d.children,dep);
        }
      }
    },
    checkName(deps,dep){
      this.checkname = false;
      if (deps.length){
        for (let i = 0; i < deps.length; i++) {
          let d = deps[i];
          if (d.name == dep.name) {
            this.$message.error("部门名字不能重复，请重新输入！");
            this.checkname = true;
            return ;
          } else {
            if (d.children && this.checkname == false){
              this.checkName(d.children,dep);
            }
          }
        }
      }
    },
    doAddDept() {
      if (this.dept.name){
        this.checkName(this.deps,this.dept);
        console.log(this.checkname);
        if ( this.checkname == true){
          this.checkname = false;
          this.dialogVisible = false;
          this.dept.name = '';
          return;
        } else {
          this.postRequest('/api/system/basic/department/', this.dept).then(resp => {
            if (resp) {
              this.insertDeptIntoDepts(this.deps, resp.result);
              this.dialogVisible = false;
              this.dept.name = '';
            }
          })
        }
      } else {
        this.$message.error("部门名字不能为空！");
      }

    },
    addDeps(date) {
      this.pname = date.name;
      this.dept.parentId = date.id;
      this.dialogVisible = true;
    },
    removeDeptFromDepts(p, deps, id) {
      for (let i = 0; i < deps.length; i++) {
        let d = deps[i];
        if (d.id == id) {
          deps.splice(i, 1);
          if (deps.length == 0) {
            p.isParent = false;
          }
          return;
        } else {
          this.removeDeptFromDepts(d, d.children, id);
        }
      }
    },
    deleteDeps(date) {
      if (date.isParent) {
        this.$message.error("父部门不能删除");
      } else {
        this.$confirm('此操作将删除部门：[ ' + date.name + ' ] 数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteRequest('/api/system/basic/department/' + date.id).then(resp => {
            if (resp) {

              this.removeDeptFromDepts(null, this.deps, date.id);
            }
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },
    initDeps() {
      this.getRequest('/api/system/basic/department/').then(resp => {
        if (resp) {
          this.deps = resp;
        }
      })
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    }
  },
  mounted() {
    this.initDeps();
  },
}
</script>

<style scoped>
.spanButton {
  padding: 2px;
}
</style>